@bg-color: #021128;
@text-color: #ffffff;
@cell-bg-color: #0d1f3a;

.mb0 {
  margin-bottom: 0 !important;
}
.bold {
  font-weight: bold !important;
}
.boxShadow {
  background: white;
  border-radius: 2px;
  box-shadow:
    inset 0 0 10px 0 rgba(8, 56, 111, 0.8),
    /* 较清晰的内阴影 */
    inset 0 0 20px 5px rgba(8, 56, 111, 0.4),
    /* 中等模糊的内阴影 */
    inset 0 0 30px 10px rgba(8, 56, 111, 0.1);
  /* 较大模糊的透明内阴影 */
}

.cell-backColor {
  background-color: @cell-bg-color !important;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: @bg-color;
}

#app {
  min-height: 100vh;
  color: @text-color;
}

// 创建横线公共类
.common-style {
  font-size: 18px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #ffffff;
  position: relative;
  display: flex;

  .common-text {
    z-index: 3;
    display: flex;
    padding-right: 13px;
    align-items: center;
    background-color: @bg-color;
  }

  .common-img {
    width: 18px;
    height: 18px;
    margin-right: 10px;
  }

  &::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 1px;
    background-image: linear-gradient(90deg,
        #2e3f58 38%,
        #2e3f58 100%);
    z-index: 1;
  }

  .year-month {
    display: flex;
    align-items: center;
    gap: 10px;
    position: absolute;
    right: 0;
    z-index: 4;
    background-color: @bg-color;
    padding-left: 8px;

    .year-month-btn {
      width: 50px;
      height: 28px;
      border: solid 1px #535e70;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: normal;
      color: #818893;
      cursor: pointer;
    }

    .active {
      background-color: #06274F;
      border: solid 1px #366bb4;
      color: #d4e6ff;
    }
  }
}

.dashboard-header {
  background-image: url('/src/assets/images/textBackground.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  // padding: 15px 30px;
  .header-content {
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 0 20px;

    .title {
      margin-right: auto;
      font-family: AlibabaPuHuiTi_2_65_Medium;
      font-size: 24px;
      font-weight: bold;
      font-stretch: normal;
      letter-spacing: 1px;
      color: #ffffff;
    }

    .date-container {
      display: flex;
      align-items: center;
      gap: 10px;
      position: relative;

      .date-label {
        font-family: AlibabaPuHuiTi_2_55_Regular;
        font-size: 14px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 42px;
        letter-spacing: 0px;
        color: #d4e6ff;
      }

      .custom-icon {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        cursor: pointer;

        /* 使用伪元素作为图标 */
        &::after {
          content: "";
          display: block;
          width: 100%;
          height: 100%;
          background-image: url('/src/assets/images/data12.png');
          background-repeat: no-repeat;
          background-position: center;
        }
      }

      .date-picker {
        border: solid 1px #324460;
        // background-color: '#0d1f3a';
        background-color: @bg-color;
        // background-image: url('/src/assets/images/data12.png');
        // background-repeat: no-repeat;
        // background-position: right 10px center;
        // background-size: 14px;
        padding-right: 35px;
        font-family: AlibabaPuHuiTi_2_55_Regular;

        /* 完全隐藏原生图标 */
        &::-webkit-calendar-picker-indicator {
          display: none;
        }

        &:focus {
          outline: none;
          border-color: #4285f4;
        }

        font-size: 14px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        padding: 6px 11px;
        color: #ffffff;

        &::-webkit-calendar-picker-indicator {
          filter: invert(1);
        }

        &::-moz-calendar-picker-indicator {
          filter: invert(1);
        }
      }
    }
  }
}

main {
  padding: 28px;

  .there-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 13px;

    // .left-there-box,
    .center-there-box,
    .right-there-box {
      width: 34%;
      background-color: @cell-bg-color;
      flex: 1;
      height: 100%;
      /* 确保每个子盒子高度一致 */
    }

    .left-there-box {
      width: 34%;
      flex: 1;
      height: 100%;
      /* 确保每个子盒子高度一致 */
    }

    .left-there-box {
      display: flex;
      justify-content: space-between;
      gap: 13px;

      .there-box-item {
        width: 24%;
        background-color: @cell-bg-color;
        text-align: center;

        .year-left-item {
          h1 {
            font-size: 13px;
            font-weight: normal;
            color: #aecaf5;
            margin-top: 50px;

            span {
              font-size: 13px;
              font-weight: normal;
              color: #da595e;
            }
          }

          .year-left-item-number {
            margin-top: 20px;
            font-size: 20px;
            font-weight: normal;
            color: #ffffff;
            position: relative;
            margin-bottom: 41px;
            transform: translateY(10px);

            .backImage {
              width: 85%;
              position: absolute;
              bottom: -15px;
              left: 50%;
              transform: translateX(-50%);
            }
          }

          .year-left-item-label {
            font-size: 14px;
            font-weight: normal;
            color: #d4e6ff;
            margin-bottom: 50px;

            span {
              font-size: 14px;
              font-weight: normal;
              color: #818893;
            }
          }
        }
      }

    }

    .center-there-box,
    .right-there-box {
      .row-title {
        font-size: 14px;
        font-weight: normal;
        color: #ffffff;
        display: flex;
        align-items: center;
        background-image: url('/src/assets/images/textBackground.png');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        padding: 10px 18px;
        margin-bottom: 22px;

        img {
          height: 16px;
          margin-right: 8px;
        }
      }

      .up-down-text {
        text-align: center;
        font-size: 13px;
        font-weight: normal;
        color: #aecaf5;

        span {
          font-size: 13px;
          font-weight: normal;
          color: #da595e;
        }
      }

      .icon-box {
        display: flex;
        justify-content: space-around;

        .icon-item {
          text-align: center;

          .icon-number {
            font-size: 20px;
            font-weight: normal;
            color: #ffffff;
            margin-bottom: 10px;
          }

          .icon-label {
            font-size: 14px;
            font-weight: normal;
            color: #d4e6ff;
            margin-bottom: 22px;

            span {
              color: #818893;
            }
          }
        }

        .icon-item-two {
          display: flex;
          align-items: center;

          .text_right {
            margin-left: 8px;

            .icon-label {
              span {
                font-size: 13px;
                color: #666;
              }
            }
          }
        }
      }
    }

    .up-down-layout-box {
      background-color: unset;
      height: 649px;

      .top,
      .bottom {
        background-color: @cell-bg-color;
        height: 49%;
      }

      .top {
        margin-bottom: 2%;
      }

      .bottom {
        .icon-box {
          margin-top: 6%;
        }
      }

      .top_small {
        background-color: @cell-bg-color;

        .huikuanNumber {
          margin-bottom: 1%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-left: 37px;
          padding-right: 40px;
          padding-bottom: 22px;

          .left_number {
            span {
              display: inline-block;
              width: 30px;
              height: 30px;
              border: solid 1px #3e516b;
              line-height: 30px;
              text-align: center;
              margin-right: 8px;
              font-size: 20px;
              background-color: #16335C;
              font-weight: bold;
            }

            b {
              color: #818893;
              font-size: 14px;
              height: 30px;
              line-height: 30px;
            }
          }

          .right_number {
            color: #aecaf5;
            font-size: 13px;

            span {
              color: red;
            }
          }
        }
      }
    }
  }
}